<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>w3cschool-编程狮，随时随地学编程</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="nav w">
        <!-- logo制作 -->
        <div class="logo ">
            <h1>
                <a href="index.html" title="w3cschool">w3cschool</a>
            </h1>
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" class="text" value="在1000+高质量的免费教程&amp;开发文档中搜索你需要的...">
            <button class="btn">
                
            </button>

        </div>
        <!-- 登录注册 -->
        <div class="xiazai1">
            <span></span>
        </div>
        <div class="xiazai2">
            <a href="#">App下载</a>
        </div>
        <div class="denglu">
            <a href="#">注册</a>
            <span class="spacer">|</span>
            <a href="#">登录</a>
        </div>
    </div>
    <!-- 课程分类栏 -->
    <div class="kecheng">
        <div class="w">
            <div class="dropdown fl">
                <div class="dt"> 编程课程分类</div>
                <div class="dd">
                    <ul>
                        <li class="item">
                            <a href="#" id="i1">新上好课<img src="upload/new.png" alt="new" class="img" ><span class="fr"></span></a></li>
                        <li class="item">
                            <a href="#">前端开发<span class="fr"></span></a></li>
                        <li class="item">
                            <a href="#">Python系列<span class="fr"></span></a> </li>
                        <li class="item">
                            <a href="#">Java系列<span class="fr"></span></a></li>
                        <li class="item">
                            <a href="#">后端开发<span class="fr"></span></a></li>
                        <li class="item">
                            <a href="#">编程基础与数据库<span class="fr"></span></a></li>
                        <li class="item">
                            <a href="#">其他课程<span class="fr"></span></a></li>
                    </ul>
                </div>
            </div>
            <!-- 右边导航栏 -->
            <div class="navitems fl ">
                <ui>
                    <li><a href="#">编程入门教程<i class="free">FERR</i></a></li>
                    <li><a href="#">FREE编程课程</a></li>
                    <li><a href="#">编程实战</a> </li>
                    <li><a href="#">编程题库</a></li>
                    <li><a href="#">在线工具</a></li>
                    <li><a href="#">VIP会员<i class="hot">HOT</i></a></li>
                    <li><a href="#">实战营</a><i class="new">New</i></li>
                </ui>
            </div>
        </div>
    </div>
    <!-- 广告登录页面 -->
    <div class="xuanchuan w">
        <div class="main">
            <div class="tupian">
                <ul>
                    <li>
                        <a href="#"><img src="upload/guanggao.png" alt=""></a>
                    </li>
                </ul>
            </div>
            <div class="shangxian">
                <table>
                    <tr>
                        <td class="th"><i class="kongbai"></i>快速登录</td>

                    </tr>
                    <tr>
                        <td><input type="text" value="学号/手机/邮箱" class="number"></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="登录密码" class="id number"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;<input type="checkbox" class="all" checked="checked">保持登录状态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">忘记密码</a></td>

                    </tr>
                    <tr>
                        <td><button class="bt">立即登录</button></td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;&nbsp;<a href="#">微信登录</a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="#">QQ登录</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;&nbsp;<a href="#">Github登录</a> &nbsp;&nbsp;<a href="#">注册账号</a>
                        </td>
                    </tr>


                </table>
            </div>
        </div>
    </div>
    <!-- 小喇叭 -->
    <div class="laba w">
        <div class="php fl">
            <i style="color: chocolate;font-size: 20px;"></i><a href="#"> . php是什么？PHP能干什么？</a>
        </div>
        <div class="java fl">
            <i style="color:#666666">01-28</i> <a href="#"> . JAVA多线程编程实例</a>
        </div>
        <div class="riqi fl">
            <i style="color:#666666">01-28</i> <a href="#" style="font-size: 20px;"></a>&nbsp;
        </div>
    </div>
    <!-- 课程链接 -->
    <div class="vip">
        <ul>
            <li>
                <a href="#"><img src="upload/1.png" alt=""></a>
                <li>
                    <a href="#"><img src="upload/2.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="upload/3.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="upload/4.png" alt=""></a>
                </li>
            </li>
        </ul>
    </div>
    <!-- 课程分类 -->
    <!-- 分类1 -->
    <div class="fenlei1">
        <div class="zong1">
            <i></i> &nbsp;<span style="font-size: 22px;font-weight: 800;">极客教程</span> &nbsp;<span style="font-size: 14px;font-weight: 220;">免费的在线教程&技术文档</span>
        </div>
        <div class="fen1">
            <ul>

                <li> <a href="#" class="a1">全部</a> </li>
                <li> <a href="#">热门教程</a></li>
                <li> <a href="#"> HTML/CSS</a></li>
                <li> <a href="#">JavaScript</a></li>
                <li> <a href="#">JavaScript</a></li>
                <li> <a href="#">后端语言</a></li>
                <li> <a href="#">开发框架</a></li>
                <li> <a href="#">数据库</a></li>
                <li> <a href="#">移动开发</a></li>
                <li> <a href="#">服务器相关</a></li>
                <li> <a href="#">开发工具</a></li>
                <li> <a href="#">大数据</a></li>
                <li> <a href="#">网站建设</a></li>
                <li> <a href="#">XML教程</a></li>

            </ul>


        </div>
    </div>
    <div class="kong"></div>
    <!-- 分类2 -->
    <div class="fenlei2">
        <div class="zong2">
            <span class="kongbai2"></span>
            <span class="zi">热门教程</span>
        </div>
        <div class="fen2 ">
            <ul>
                <li>
                    <a href="#"><img src="upload/1.1.png" alt=""><span>学习快乐</span></a>
                </li>
                <li>
                    <a href="#"><img src="upload/1.2.png" alt=""><span>学习真的快乐</span></a>
                </li>
                <li>
                    <a href="#"><img src="upload/1.3.png" alt=""><span>学习真的太快乐了</span></a>
                </li>
            </ul>
            <ul class="zuo">
                <li>
                    <a href="#"><img src="upload/2.1.png" alt=""><span>我爱学习</span></a>
                </li>
                <li>
                    <a href="#"><img src="upload/2.2.png" alt=""><span>学习爱我</span></a>
                </li>
                <li>
                    <a href="#"><img src="upload/2.3.png" alt=""><span>太快乐了</span></a>
                </li>
            </ul>
            <ul class="zuo">
                <li>
                    <a href="#"><img src="upload/3.1.png" alt=""><span>好好学习</span></a>
                </li>
                <li>
                    <a href="#"><img src="upload/3.2.png" alt=""><span>天天向上</span></a>
                </li>
                <li>
                    <a href="#"><img src="upload/3.3.png" alt=""><span>勇往直前</span></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 新闻栏目 -->
    <div class="xinwen">
        <div class="bankuai1 fl">
            <span class="sp1">最新文章</span>
            <span><a href="#" class="fr sp2">更多>></a></span>
            <ul>
                <li class="li1">
                    <a href="#">Java线程之三种实现方式</a>
                    <span class="fr">01-29</span>
                </li>

                <li>
                    <a href="#">php是什么？PHP能干什么？</a>
                    <span class="fr">01-28</span>
                </li>
                <li>
                    <a href="#">什么是HTM或HTML文件? </a>
                    <span class="fr">01-28</span>
                </li>

                <li>
                    <a href="#">java接口是什么</a>
                    <span class="fr">01-28</span>
                </li>
                <li>
                    <a href="#">普通人学Python有什么用？</a>
                    <span class="fr">01-28</span>
                </li>
            </ul>
        </div>
        <div class="bankuai1 fl">
            <span class="sp1">最新教程</span>
            <span><a href="#" class="fr sp2">更多>></a></span>
            <ul>
                <li class="li1">
                    <a href="#">Java线程之三种实现方式</a>
                    <span class="fr">01-29</span>
                </li>

                <li>
                    <a href="#">php是什么？PHP能干什么？</a>
                    <span class="fr">01-28</span>
                </li>
                <li>
                    <a href="#">什么是HTM或HTML文件? </a>
                    <span class="fr">01-28</span>
                </li>

                <li>
                    <a href="#">java接口是什么</a>
                    <span class="fr">01-28</span>
                </li>
                <li>
                    <a href="#">普通人学Python有什么用？</a>
                    <span class="fr">01-28</span>
                </li>
            </ul>
        </div>
        <div class="bankuai1 fl">
            <span class="sp1">最新工具</span>
            <span><a href="#" class="fr sp2">更多>></a></span>
            <ul>
                <li class="li1">
                    <a href="#">Java线程之三种实现方式</a>
                    <span class="fr">01-29</span>
                </li>

                <li>
                    <a href="#">php是什么？PHP能干什么？</a>
                    <span class="fr">01-28</span>
                </li>
                <li>
                    <a href="#">什么是HTM或HTML文件? </a>
                    <span class="fr">01-28</span>
                </li>

                <li>
                    <a href="#">java接口是什么</a>
                    <span class="fr">01-28</span>
                </li>
                <li>
                    <a href="#">普通人学Python有什么用？</a>
                    <span class="fr">01-28</span>
                </li>
            </ul>
        </div>

    </div>
    <!-- 友情链接 -->
    <div class="youqing">

        <h3>友情链接：</h3>
        <a href="#" class="aa">W3Cschool</a>
        <a href="#" class="aa">编程狮(W3C)</a>
        <a href="#" class="aa">设计素材</a>
        <a href="#" class="aa">office办公助手</a>
        <a href="#" class="aa">JSON在线工具</a>
        <a href="#" class="aa">Linux教程</a>
        <a href="#" class="aa">模板之家</a>
        <a href="#" class="aa">中望CAD官网</a>
        <a href="#" class="aa">我要自学网</a>
        <a href="#" class="aa">U盘装机大师</a>
        <a href="#" class="aa">蓝叠安卓模拟器官网</a>
        <a href="#" class="aa">蓝点网</a>
        <a href="#" class="aa">APIcloud</a>
        <a href="#" class="aa">更多»</a>

    </div>
    <!-- 底部 -->
    <div class="footer">
        <!-- help -->
        <div class="w">
            <dl class="help">
                <dt>网站相关</dt>
                <dd><a href="#">关于我们</a></dd>
                <dd><a href="#">加入我们</a></dd>
                <dd><a href="#">网站地图</a></dd>
                <dd><a href="#">友情链接</a></dd>
            </dl>
            <dl class="help2">
                <dt> 内容专区</dt>
                <dd><a href="#">编程入门教程</a></dd>
                <dd><a href="#">极客导航</a></dd>
                <dd><a href="#">在线工具</a></dd>
                <dd><a href="#">文章存档</a></dd>
            </dl>

            <dl class="help3">
                <dt>常用链接</dt>
                <dd><a href="#">编程实战</a></dd>
                <dd><a href="#">课程合作</a></dd>
                <dd><a href="#">w3cschool离线下载</a></dd>
                <dd><a href="#">w3cschool手机版</a></dd>
            </dl>
            <dl class="help4">
                <dt>联系我们</dt>
                <dd><a href="#">常见问题QA</a></dd>
                <dd><a href="#">官方QQ群：668469541</a></dd>
                <dd><a href="#">商务合作QQ：3532917531</a></dd>
                <dd><a href="#">企业采购微信号：bcshi666</a></dd>
            </dl>
            <dl class="help5">
                <dt></dt>
                <dd><img src="upload/app.png" alt="下载APP" width="90px" height="90px"></dd>
                <dd><i>下载APP</i></dd>
            </dl>
            <dl class="help6">
                <dt></dt>
                <dd><img src="upload/mp.png" alt="关注公众号" width="90px" height="90px"></dd>
                <dd><i>关注公众号</i></dd>
            </dl>
        </div>
        <!-- 联系我们 -->
        <div class="lianxi">
            <p>Copyright©2020 w3cschool编程狮 闽ICP备15016281号-3 <img src="upload/man.png" alt="警察" />闽公网安备35020302033924号</p>
        </div>
    </div>
</body>

</html>